<template>
    <!--
    <div id="memo" class="vditor-reset--dark"></div>
    -->

    <mdui-text-field clearable label="搜索" @input="search" class="top">
        <mdui-button-icon slot="icon" icon="add" @click="newMemo"></mdui-button-icon>
    </mdui-text-field>




    <mdui-list>


        <mdui-dropdown v-if="memoList.length >= 1" v-for="item in memoList" trigger="contextmenu" open-on-pointer
            :key="item.id">
            <mdui-list-item slot="trigger" :headline="item.name" :description="f.Time(item.time)"
                @click="openMemo(item.id)">

            </mdui-list-item>
            <mdui-menu>
                <mdui-menu-item @click="removeMemo(item.id, item.name)">删除</mdui-menu-item>
                <mdui-menu-item @click="rename(item.id, item.name)">重命名</mdui-menu-item>
                <mdui-menu-item @click="openMemo(item.id)">打开</mdui-menu-item>
            </mdui-menu>
        </mdui-dropdown>
        <div v-else>
            <center>
                <img style="width: 400px;margin-top: 100ox;" src="/no.svg" alt="">
            </center>
        </div>
    </mdui-list>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import f from "@/assets/func"
import { useIpcRenderer } from "@vueuse/electron";
const ipcRenderer = useIpcRenderer();
import { prompt } from "mdui/functions/prompt.js";
import { snackbar } from "mdui/functions/snackbar.js";
import router from '@/router';
import e from 'cors';
import { confirm } from "mdui/functions/confirm.js";


const channel = new BroadcastChannel("ememo");
let ml = []
const memoList = ref([])
const sf = (event) => {
    console.log('Input value:', event.target.value);
    let v = event.target.value;
    if (v.length < 1) {
        memoList.value = ml;
    } else {
        let d = []
        ml.forEach((item) => {
            if (item.name.indexOf(v) > -1) {
                d.push(item)
            }
        })
        memoList.value = d;
    }
}

const search = f.debounce(sf, 500)

onMounted(() => {
    ipcRenderer.on("get-list-memo", (event, arg, data) => {
        console.log(arg);
        // 倒序
        if (arg) {
            memoList.value = data
            ml = data
        } else {
            snackbar({
                message: "程序异常",
            })
        }
    })
    ipcRenderer.send("get-list-memo")
})

const newMemo = () => {
    ipcRenderer.send("memo-window")
}

channel.onmessage = (event) => {
    console.log(event.data);
    if (event.data == "load") {
        ipcRenderer.on("get-list-memo", (event, arg, data) => {
            console.log(arg);
            // 倒序
            if (arg) {
                memoList.value = data
                ml = data
            } else {
                snackbar({
                    message: "程序异常",
                })
            }
        })
        ipcRenderer.send("get-list-memo")
    }
}

const openMemo = (id) => {
    ipcRenderer.send("memo-window", id)
}

const removeMemo = (id, name) => {
    confirm({
        headline: "是否删除?",
        description: `是否要删除 ${name} ,删除后不可恢复`,
        confirmText: "确定",
        cancelText: "取消",
        onConfirm: () => {
            ipcRenderer.on("delete-memo", (event, arg, data) => {
                if (arg) {
                    snackbar({
                        message: "删除" + name + "成功",
                    })
                    for (let i = 0; i < memoList.value.length; i++) {
                        if (memoList.value[i].id == id) {
                            memoList.value.splice(i, 1);
                        }
                    }
                    ml = memoList.value;
                } else {
                    snackbar({
                        message: "删除失败",
                    })
                }
            })
            ipcRenderer.send("delete-memo", id)
        }
    });




}


const rename = (id, name) => {
    prompt({
        headline: "重命名",
        description: "您要将 " + name + " 重命名为:",
        confirmText: "确定",
        cancelText: "取消",
        onConfirm: (value) => {
            ipcRenderer.on("rename-memo", (event, arg) => {
                if (arg) {
                    snackbar({
                        message: `成功将 ${name} 重命名为 ${value}`
                    })
                    for (let i = 0; i < memoList.value.length; i++) {
                        if (memoList.value[i].id == id) {
                            memoList.value[i].name = value;
                        }
                    }
                    ml = memoList.value;
                } else {
                    snackbar({
                        message: "重命名失败",
                    })
                }
            })

            ipcRenderer.send("rename-memo", {
                id: id,
                name: value
            })
        }
    });
}

//const inputName = () => {
//    prompt({
//        headline: "请输入便签名称",
//        confirmText: "确认",
//        cancelText: "取消",
//        onConfirm: (value) => {
//            console.log(value);
//            if (value.length < 1) {
//                snackbar({
//                    message: "请输入名称",
//                });
//            } else if (value.length > 20) {
//                snackbar({
//                    message: "名称过长",
//                })
//            } else if (value.indexOf(" ") > -1) {
//                snackbar({
//                    message: "名称不能包含空格",
//                })
//            } else if (value.indexOf("/") > -1 || value.indexOf("\\") > -1 || value.indexOf(":") > -1 || value.indexOf("*") > -1 || value.indexOf("?") > -1 || value.indexOf('"') > -1 || value.indexOf("<") > -1) {
//                snackbar({
//                    message: "名称不能包含特殊字符",
//                })
//            } else if (value.indexOf(".") > -1) {
//                snackbar({
//                    message: "名称不能包含后缀",
//                })
//            } else if (!isOn(value)) {
//                snackbar({
//                    message: "名称已存在",
//                })
//            } else {
//                ipcRenderer.on("new-memo", (event, arg) => {
//                    console.log(arg);
//                    if (arg.code == 0) {
//                        snackbar({
//                            message: "添加成功",
//                        })
//                        ipcRenderer.on("get-memo-list", (event, arg) => {
//                            memoList.value = arg.reverse();
//                        })
//                        ipcRenderer.send("get-memo-list")
//                    } else {
//                        snackbar({
//                            message: "添加失败",
//                        })
//                    }
//                })
//                ipcRenderer.send("new-memo", value + ".mj")
//
//            }
//        }
//    })
//}

const isOn = (name) => {
    for (let i = 0; i < memoList.value.length; i++) {
        if (memoList.value[i].name == name) {
            return false
        }
    }
    return true
}


</script>

<style scoped>
.top {
    width: 100%;
    height: 60px;
}
</style>